<template>
<div>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <avue-avatar  size="large" :src="data.userFace"></avue-avatar>
    </div>
    <div>
     <el-tag size="small" style="padding: 1px;">电话:</el-tag> <span>{{data.phone}}</span><p></p>
      <el-tag size="small" style="padding: 1px">座机:</el-tag> <span>{{data.telephone}}</span><p></p>
      <el-tag size="small" style="padding: 1px">住址:</el-tag> <span>{{data.address}}</span>
    </div>
    <div class="clearfix">
     <el-button type="primary" size="small" @click="dialogVisible=true">修改密码</el-button>
      <el-button type="danger" size="small">删除</el-button>
    </div>
  </el-card>
  <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">
    <el-tag>修改密码</el-tag>
    <el-input v-model="password.oldPass"></el-input>
    <el-input v-model="password.password"></el-input>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="changePass">确 定</el-button>
  </span>
  </el-dialog>

</div>
</template>

<script>
import axios from "axios";

export default {
  name: "Admininfo",
  data(){
    return {
      password:{
        adminId:'',
        oldPass: '',
        pass:''
      },
      dialogVisible:false,
      data:[],
    }
  },
  methods:{
    initAdmin(){
      axios({
        url:'/api/admin/info'
      }).then((res)=>{
        this.data=res.data
      })
    },
    changePass(){
      console.log(this.$store.state.currentAdmin.id)
      this.password.adminId = this.$store.state.currentAdmin.id

axios({
    method:'put',
   url:'/api/admin/pass',
    data:this.password
}).then(()=>{
  this.dialogVisible=false;
  this.$router.replace('/')
})
    }
  },
  mounted() {
    this.initAdmin()
  }
}
</script>

<style scoped>
.box-card{
  width: 300px;
  margin: 20px auto;
}
.clearfix{
  display: flex;
  justify-content: center;
}
</style>